<template>
  <vxe-modal id="fileDialog" v-model="showDialog" :title="title" :destroy-on-close="true" width="600px">
    <vxe-table border show-header-overflow show-overflow height="200" size="mini" :row-config="{ isHover: true }" :data="inFileList">
      <vxe-column type="seq" title="序号" width="60" align="center" />
      <vxe-column field="name" title="文件名称" />
      <vxe-column title="操作" width="150" align="center" show-overflow>
        <template #default="{ row,rowIndex }">
          <vxe-button type="text" icon="el-icon-download" @click="download(row.url)">下载</vxe-button>
          <vxe-button v-if="file_edit" type="text" icon="vxe-icon-delete" @click="delFile(rowIndex)">删除</vxe-button>
        </template>
      </vxe-column>
    </vxe-table>
    <el-row style="margin-top:20px">
      <el-upload
        ref="uploadUpdate"
        class="upload-demo"
        :action="action"
        :multiple="true"
        :accept="accpetTypes"
        :limit="Number(limit)"
        :on-remove="beforeRemove"
        :on-success="handleSuccess"
        :on-exceed="handleExceed"
        :file-list="fileList"
        :auto-upload="true"
      >
        <el-button v-if="file_edit" slot="trigger" size="small">选择</el-button>
        <el-button v-if="file_edit" style="margin-left: 5px;" type="primary" size="small" @click="confirmUpload()">确认上传</el-button>
        <el-button v-if="file_edit" style="float: right;" type="success" size="small" @click="save()">保存文件更改</el-button>
      </el-upload>
    </el-row>
  </vxe-modal>
</template>

<script>
import * as api from '@/api/template/file'
import VXETable from 'vxe-table'
import {baseURL} from '@/config'

export default {
  props: ['params'],
  data() {
    return {
      action:'',
      showDialog: false,
      title: '',
      inFileList: [],
      fileList: [],
      accpetTypes: '',
      limit: 0,
      file_edit: false,
    }
  },
  methods: {
    show(params) {
      const { ids, title, accpetTypes, limit, folder, file_edit } = params
      this.ids = ids
      this.title = title
      this.accpetTypes = accpetTypes
      this.limit = limit
      this.file_edit = file_edit
      this.folder = folder
      this.showDialog = true
      this.action = baseURL+'/file/upload'
      this.getFile()
    },
    getFile() {
      this.fileList = []
      api.getFileList(this.ids).then(res => {
        this.inFileList = res.list
      })
    },
    delFile(index) {
      this.$confirm('确认要删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.inFileList.splice(index, 1)
      })
    },
    confirmUpload() {
      api.confirmUpload({ accpetTypes: this.accpetTypes, fileList: this.fileList, folder: this.folder }).then(res => {
        this.$message({
          message: res.msg,
          type: 'success'
        })
        for (var i = 0; i < res.respFileList.length; i++) {
          this.inFileList.push({
            id: res.respFileList[i].id,
            name: res.respFileList[i].name,
            url: res.respFileList[i].url
          })
        }
        this.$refs.uploadUpdate.clearFiles()
      })
    },
    save() {
      return new Promise((resolve, reject) => {
        var fileIds = ''
        for (var i = 0; i < this.inFileList.length; i++) {
          fileIds += this.inFileList[i].id + ','
        }
        this.$emit('fileModify', fileIds.substring(0, fileIds.length - 1))
        this.showDialog = false
        resolve(fileIds.substring(0, fileIds.length - 1))
      })
    },
    beforeRemove(file, fileList) {
      this.fileList = fileList
    },
    handleSuccess(res, file, fileList) {
      this.fileList = fileList
    },
    handleExceed(file, fileList) {
      this.$message({
        type: 'error',
        message: '超出文件个数限制'
      })
    },
    download(url) {
      window.open(url)
    },
    async handleClose() {
      const type = await VXETable.modal.confirm('文件更改未保存，确认要关闭吗?')
      if (type !== 'confirm') {
        return new Error()
      }
    },
    close() {
      this.fileList = []
      this.showDialog = false
    }
  }
}
</script>
